<template>
  <div class="container">
    <div class="header background-image" style="background-image:url(http://mytimg.178mr.com/system_loginback.png)">
      <div class="logomain">
        <img class="logoimg" src="http://mytimg.178mr.com/system_login_logo.png">
      </div>
      <p class="version">@version_1.02</p>
    </div>
    <div class="form">
      <div class="login_input ls">
        <input type="text" placeholder="连锁编号" class="input" v-model="form.orcode">
      </div>
      <div class="login_input" v-if="!wxshow">
        <input type="text" placeholder="手机号码" class="input" v-model="form.username">
      </div>
      <div class="login_input lock" v-if="!wxshow">
        <input type="password" placeholder="密码" class="input" v-if="showpas" v-model="form.password">
        <input type="text" placeholder="密码" class="input" v-if="!showpas" v-model="form.password">
        <view class="eye" @click="showpassord"></view>
      </div>
    </div>
    <button type="default" class="login_btn" v-if="!wxshow" @click="getlogin">立即登录</button>
    <button type="default" class="login_btn weixin" v-if="wxshow" open-type="getPhoneNumber" @getphonenumber="getwxlogin" style="margin-top:82rpx;">微信用户快速登录</button>
    <div class="login_words" v-if="!wxshow" @click="changephone">切换微信登录</div>
    <div class="login_words" v-if="wxshow" @click="changephone">切换手机登录</div>
    <div class="login_words_ys" @click="demoLogin">-演示登录-</div>
  </div>
</template>

<script>
import wx from 'wx'
import Toast from '@/utils/toast'
import util from '@/utils/util'
import user from '@/services/user'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      motto: 'Hello World',
      userInfo: {},
      showpas: true,
      wxshow: true,
      searchContent: '',
      code: '',
      form: {
        orcode: '',
        username: '',
        password: ''
      },
      token: ''
    }
  },

  components: {
  },
  computed: {
    ...mapState([
      'count'
    ])
  },
  created () {
  },
  methods: {
    async demoLogin () {
      let form = {
        orcode: '100088',
        username: '18601780358',
        password: '18601780358'
      }
      user.loginBypassword(form).then(res => {
        this.globalData.userInfo = res.data[1]
        Toast(res.msg, 'success')
        this.reset()
        wx.switchTab({
          url: '/pages/basic/dynamic/dynamic'
        })
        wx.setStorageSync('login_type', 2);
      }).catch((err) => {
        console.log('登陆失败', err)
        Toast(err.msg, 'fail')
        this.reset()
      });
      // wx.navigateTo({
      //   url: '/pages/demoaccount/demoaccount'
      // })
    },
    // 点击登陆
    async getwxlogin (e) {
      if (!util.validateEmp(this.form.orcode)) {
        Toast('连锁编号不能为空', 'noicon');
        return
      }
      if (e.mp.detail.encryptedData && e.mp.detail.iv && this.token) {
        let parems = {
          encryptedData: e.mp.detail.encryptedData,
          iv: e.mp.detail.iv,
          orcode: this.form.orcode,
          token: this.token
        }
        user.loginByphoneWeixin(parems).then(res => {
          this.globalData.userInfo = res.data[1]
          Toast(res.msg, 'success')
          wx.switchTab({
            url: '/pages/basic/dynamic/dynamic'
          })
        }).catch((err) => {
          // console.log('登陆失败', err)
          if (err.msg) {
            Toast(err.msg, 'fail')
          } else {
            // 同一个code只能请求一次微信接口再次请求就会报错
            Toast(err.errmsg, 'fail')
          }
        });
      } else {
      }
    },
    // 微信快速登录
    getlogin () {
      if (!util.validateEmp(this.form.orcode)) {
        Toast('连锁编号不能为空', 'noicon');
        return
      }
      if (!util.validateEmp(this.form.username)) {
        Toast('手机号码不能为空', 'noicon');
        return
      }
      if (!util.validateEmp(this.form.password)) {
        Toast('密码不能为空', 'noicon');
        return
      }
      user.loginBypassword(this.form).then(res => {
        this.globalData.userInfo = res.data[1]
        Toast(res.msg, 'success')
        this.reset()
        wx.switchTab({
          url: '/pages/basic/dynamic/dynamic'
        })
      }).catch((err) => {
        console.log('登陆失败', err)
        Toast(err.msg, 'noicon')
        this.reset()
      });
    },
    showpassord () {
      if (this.showpas) {
        this.showpas = false
      } else {
        this.showpas = true
      }
    },
    changephone () {
      if (this.wxshow) {
        this.wxshow = false
      } else {
        this.wxshow = true
      }
    },
    reset () {
      this.form.orcode = ''
      this.form.username = ''
      this.form.password = ''
    }
  },
  async onLoad () {
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
    // const res = await util.login()
    // if (res) {
    //   this.code = res.code
    // }
    this.token = wx.getStorageSync('token')
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    } else {
      console.log(res.target)
    }
    return {
      title: '美易通员工版小程序',
      path: `/pages/basic/login/login`
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
  background: #fff;
}
.container {
  height: 100%;
  background: #fff;
}
.header {
  width: 100%;
  height: 270rpx;
}
.background-image {
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.logomain {
  width: 130rpx;
  margin: 20rpx auto;
}
.logoimg {
  width: 130rpx;
  height: 130rpx;
}
.version {
  color: #ffffff;
  font-size: 26rpx;
  width: auto;
  float: right;
  margin: -15rpx 65rpx 0 0;
}
.form {
  margin-top: 80rpx;
}
.login_input {
  display: block;
  width: 614rpx;
  height: 82rpx;
  margin: 0 auto;
  border-radius: 36rpx;
  position: relative;
  padding-left: 82rpx;
  background: rgba(255, 68, 68, 0.1)
    url("http://mytimg.178mr.com/system_login_phone.png") no-repeat;
  background-position: 20rpx 20rpx;
  background-size: 42rpx 42rpx;
  margin-bottom: 40rpx;
}
.login_input.ls {
  background: rgba(255, 68, 68, 0.1)
    url("http://mytimg.178mr.com/system_login_orcode.png") no-repeat;
  background-position: 20rpx 20rpx;
  background-size: 42rpx 42rpx;
  margin-bottom: 40rpx;
}
.login_input.lock {
  background: rgba(255, 68, 68, 0.1)
    url("http://mytimg.178mr.com/system_login_password.png") no-repeat;
  background-position: 20rpx 20rpx;
  background-size: 42rpx 42rpx;
  margin-bottom: 40rpx;
}
.input {
  width: 500rpx;
  height: 82rpx;
  border-radius: 36rpx;
  line-height: 82rpx;
  font-size: 28rpx;
  color: #333;
}
.eye {
  position: absolute;
  width: 42rpx;
  height: 42rpx;
  right: 32rpx;
  top: 20rpx;
  background: url("http://mytimg.178mr.com/system_login_eye.png") no-repeat;
  background-size: 100%;
}
.login_btn {
  position: relative;
  width: 614rpx;
  height: 82rpx;
  border-radius: 36rpx;
  line-height: 82rpx;
  font-size: 30rpx;
  color: #fff;
  background: linear-gradient(
    90deg,
    rgb(255, 68, 68) 0%,
    rgba(255, 68, 68, 0.7) 100%
  );
  text-align: center;
  margin-top: 30rpx;
}
.weixin::after {
  content: "";
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  top: 6rpx;
  left: 100rpx;
  background: url("http://mytimg.178mr.com/wx_btn.png") no-repeat;
  background-size: 100%;
  border: none;
}
.login_words {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
  color: rgba(153, 153, 153, 1);
  text-align: center;
  margin-top: 40rpx;
}
.login_words_ys {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  color: rgba(153, 153, 153, 1);
  text-align: center;
  margin-top: 50rpx;
}
</style>


